<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <title>Title</title>
    <!-- <link rel="stylesheet" type="text/css" href="../static/css/cartPage.css"> -->
</head>

<body>
<!--顶部框-->
<div class="header-container justify-content-center py-3 border-bottom">
    <div class="row">
        <div class="col-lg-9 text-left px-5">
            <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32">
                    <image width="40" height="32" xlink:href="../image/back.png"></image>
                </svg>
                <span class="fs-4">宠物商店商户平台</span>
            </a>
        </div>
        <div class="col-lg-3 text-center" >
            <button type="button" th:if="${session.userID}" class="btn btn-outline-primary me-2">登录</button>
            <button type="button" th:if="${session.userID}" class="btn btn-outline-primary">注册</button>
            <button type="button" th:if="${session.userID ne null}" id="btn-logout" class="btn btn-outline-primary">注销</button>
        </div>
    </div>
</div>
<!--顶部框结束-->
<!--页面主体-->
<div class="row">
    <!--侧边导航栏-->
    <div class="col-lg-2 bg-dark text-light nav nav-pills flex-column nav-justified"
         style="min-height: 90vh; padding: 0;">
        <div class="my-5" style="padding: 0;">
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/index" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">首页</div>
                </a>
            </li>
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/order" style="padding: 0; background-color: #5F788A;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">订单管理</div>
                </a>
            </li>
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/itemManage" style="padding: 0; ">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">商品管理</div>
                </a>
            </li>
            <li class="nav-item" th:if="${session.admin}" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/userManage" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">用户管理</div>
                </a>
            </li>
        </div>
    </div>
    <!--侧边导航栏结束-->
    <!--主体部分开始-->
    <div class="col-lg-10" style="background-color: #F3F6F6;">
        <div class="mt-2 text-center bg-light">
            <h3>订单管理</h3>
        </div>
        <!--选项卡开始-->
        <div class="mt-2" style="background-color: white;">
            <!--选项卡对应页面开始-->
            <div class="tab-content">
                <div class="mainColumn">
                    <div class="mainColumnm">
                        <div class="wrap clearfix">
                            <form action="order">
                                <table class="table table-bordered cartTable" width="100%" cellspacing="0"
                                       cellpadding="10px">
                                    <!-- 首行 -->
                                    <tr class="title">
                                        <td width="100">图片</td>
                                        <td width="400">商品信息</td>
                                        <td width="150">单价（元）</td>
                                        <td width="150">数量</td>
                                        <td width="150">金额（元）</td>
                                    </tr>


                                    <!-- 商品具体信息 -->

                                    <tr th:each="orders:${orderLists}" class="title rows"
                                        th:attr="id=|row${orders.itemId}|">
                                        <td width="100" class="tal">
                                            <a th:attr="href=|Item?productId=${orders.itemId}&categoryId=${orders.itemId}|"
                                               class="pic">
                                                <img width="50" height="50" style="border-radius: 5px"
                                                     th:attr="src=${orders.description},alt=${orders.itemId}">

                                            </a>
                                        </td>
                                        <td width="400" class="tal"><a
                                                th:attr="href=|Item?productId=${orders.itemId}&categoryId=${orders.itemId}|"
                                                th:text="${orders.itemId}"></a>
                                        </td>
                                        <td width="150">
                                            <b th:attr="id=|price${orders.itemId}|" class="unit"
                                               th:text="${orders.price}"></b>
                                        </td>
                                        <td width="150">
                                            <div class="amount">
                                                <form name="quantityFrm" action="cartEdit">
                                                    <input type="text"
                                                           th:attr="id=|ip${orders.itemId}|,value=${orders.quantity}"
                                                           name="quantity" class="unum" readonly="readonly">
                                                </form>

                                            </div>
                                        </td>
                                        <td width="150"><b th:attr="id=|up${orders.itemId}|" class="u-price"></b>
                                        </td>

                                    </tr>


                                    <tr class="count" style="text-align:right">
                                        <td colspan="7">
                                            <div class="jiesuan clearfix">
                                                <div class="right fr clearfix">

                                                    <p>已选商品<span class="red t-number"> 0 </span>件 总价(不含运费、税费)：<span
                                                            class="red t-price">￥0.00</span>
                                                    </p>
                                                    <!-- <div><a href="#" class="btn pay">结算</a></div> -->
                                                    <a th:href="order">
                                                        <button type="button" id="payfr" class="btn btn-primary pay fr"
                                                                data-bs-toggle="modal">确定
                                                        </button>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
                <!--选项卡对应页面结束-->
            </div>
            <!--选项卡结束-->
        </div>
        <!--主体部分结束-->
    </div>
    <!--页面主体结束-->
    <!-- 引入JS文件 -->
</div>
</body>
<script src="/jQuery/jquery-3.5.1.js"></script>
<script src="/javascripts/cart.js" type="text/javascript"></script>

</html>